<template>
  <div class="app">
    <!-- 顶部导航栏 -->
    <nav>
      <RouterLink to="/index">首页</RouterLink>
      <RouterLink to="/department">部门管理</RouterLink>
      <RouterLink to="/brand">品牌管理</RouterLink>
      <RouterLink to="/product">产品管理</RouterLink>
    </nav>

    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" style="margin-left: 200px; ">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
        <RouterLink :to="item.path">首页/{{ item.breadcrumb }}</RouterLink>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 路由视图 -->
    <RouterView />
  </div>
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router';
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus';

// 动态生成面包屑列表
const route = useRoute();
const router = useRouter();

const breadcrumbList = computed(() =>
    router
        .getRoutes()
        .filter((r) => route.matched.some((m) => m.path === r.path))
        .map((r) => ({
          path: r.path,
          breadcrumb: r.meta.breadcrumb,
        }))
);
</script>

<style scoped>
/* 固定导航栏样式 */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
  z-index: 1000;
}

nav a.router-link-exact-active {
  color: var(--color-text);
  font-weight: bold;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  text-decoration: none;
  color: #333;
}

nav a:first-of-type {
  border: 0;
}

nav a:hover {
  color: #42b983;
}

/* 给内容区域添加上边距，避免被固定导航栏遮挡 */
.app {
  padding-top: 6rem;
}

.el-breadcrumb {
  margin: 1rem;
}
</style>
